
<template>
    <div v-loading="allshow">
      <div class="search" >
          <div class="input">
              <p>
                <label>状态：</label>
                  <el-select v-model="type" placeholder="请选择">
                    <el-option
                      v-for="(item) in typeList"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </p>
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="dialogs">新增签名</el-button>
         <el-button type="primary" @click="synTem">同步审核数据</el-button>
      </div>
      <tableVue :list="list" :state="true" @changeData="selectionVal" v-loading="loading" :total="total">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="compile(scope.row)">编辑
                  </el-button>
                   <el-button
                    size="mini"
                    type="success"
                    class="del"
                    v-if="(scope.row.signStatus =='已通过' || scope.row.signStatus =='待审核')?false:true"
                    @click="sub(scope.row)">提审</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="del(scope.row)">删除</el-button>

                </template>
            </el-table-column>
          </slot>
      </tableVue>
      <dialogVue title="新增模板" :dialog="dialog" @close="changeData" :state="false">
          <slot>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                   <el-form-item label="签名资质">
                       <el-upload
                            class="upload-demo"
                            action="www.baidu.com"
                            :file-list="fileList"
                            :auto-upload ='false'
                            :on-change="getImg"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>

                    </el-form-item>
                    <el-form-item label="签名内容" prop="signText">
                        <el-input v-model="ruleForm.signText" placeholder="请输入内容" type="textarea" :autosize='{ minRows: 2, maxRows: 6 }'></el-input>
                     </el-form-item>
                    <el-form-item label="签名备注" prop="signRemark">
                        <el-input v-model="ruleForm.signRemark" placeholder="请输入内容"></el-input>
                     </el-form-item>

                    <el-form-item class="confirm">
                       <el-button type="primary" v-if="btnstate == '1'" @click="submitForm('ruleForm','post')">创建</el-button>
                       <el-button type="primary"  v-if="btnstate == '2'" @click="submitForm('ruleForm','put')">更新</el-button>
                   </el-form-item>
                </el-form>
          </slot>
      </dialogVue>
    </div>
</template>

<script>
  import Data from './signatureData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    signatureList,
    addsignature,
    subSig,
    synTemplate,
    getdxDetails
  } from '@/api/note/signature'
  import {
    delsignature
  } from "@/api/note/delNote"
  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     mounted () {
       this.getSignatureList();
     },
     methods : {
       getSignatureList (data) {//获取签名列表
         this.loading = true;
         signatureList(data).then(res=>{
           if (res.data.code == 'OK') {
             this.loading = false;
             this.total = res.data.data.total;
             this.list.tbody = res.data.data.records.map(item=>{
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                switch (item.signStatus) {
                  case 0 : item.signStatus = '已通过'
                  break;
                  case 1 : item.signStatus = '待审核'
                  break;
                  case 2 : item.signStatus = '已拒绝'
                  break;
                  case -1 : item.signStatus = '本地保存'
                  break;
                  case -2 : item.signStatus = '请求失败'
                  break;
                  default:
                    break;
                }
                return item;
             });
              this.total = res.data.data.total;
           } else {
             this.$message.error(res.data.message);
           }
         })
       },
       sub(data){//提审签名
           let da ={signId:data.smsSignId}
           subSig(da).then(res=>{
               if(res.data.code=="OK"){
                   this.$message.success('提审成功！');
                   this.getSignatureList();
               }else{
                   this.$message.error(res.data.message)
               }
           })
       },
       dialogs() {
         this.dialog = true;
         this.btnstate = '1';
         this.$refs['ruleForm']&&this.$refs['ruleForm'].resetFields()
         this.fileList = [];
         this.ruleForm = {};
       },
       getImg(file,fileList){
           var reader = new FileReader()
            reader.readAsDataURL(file.raw);
            reader.onload =  () => {
                console.log(reader.result)
                this.ruleForm.signPic = reader.result.split(",")[1];
            }
       },
       changeData (val) {
           this.dialog = val;
           this.ruleForm = {}
       },
       handleEdit(idx,item){
          if (this.selectionVals.length == 0) {
              // this.hint('请选择详情','error')
          } else {
            this.$router.push({
              name : 'TemplateDetails'
            })
          }
       },
       inquire () {
            this.handleData(this.selectionVals,'请选择查询签名','error','TemplateDetails');
       },
       synTem(){
           if(this.dxData.length==0){
               this.$message.error('请选择需要同步的数据！')
               return;
           }
           var id = []
           console.log(    this.dxData);
           var url = '/sms/sign/sync?signId='
          this.dxData.map(item=>{
            id.push(item.smsSignId)
          })
           url += id.join('&signId=')
           synTemplate(url).then(res=>{
               if(res.data.code=="OK"){
                    this.$message.success('同步数据成功！');
               }else{
                   this.$message.error(res.data.message)
               }
           })


       },
       compile (item) {
         this.allshow =true;
         getdxDetails(item.smsSignId).then(res=>{
             if(res.data.code == "OK"){
                    this.allshow =false;
                    this.fileList = [{name:item.signText, url:'data:image/jpeg;base64,'+res.data.data.signPic}]
                    this.ruleForm.signRemark = item.signRemark;
                    this.dialog = true;
                    this.btnstate = '2';
                    this.ruleForm.smsSignId = item.smsSignId;
                    this.ruleForm.signPic = item.signPic;

                    this.ruleForm.signText = item.signText;
             }else{
                 this.$message.error(res.data.message)
                 this.allshow =false;
             }

         })



       },
       selectionVal (data) {
          this.dxData = data;
       },
       del (item) {
         this.delMessage(()=>{
           var id = []
           id.push(item.smsSignId)
           delsignature(id).then(res=>{
             if (res.data.code == 'OK') {
                 this.$message.success('删除成功');
                 this.getSignatureList();
             } else {
               this.$message.error(res.data.message);
             }
           })
         })
       },
       submitForm(formName,method) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              addsignature(this.ruleForm,method).then(res=>{
                if (res.data.code == 'OK') {
                     this.getSignatureList();
                      this.dialog = false;
                  if (method == 'post') {
                      this.$message.success('新增成功');
                  } else {
                      this.$message.success('编辑成功');
                  }
                } else {
                  console.log(res);
                }
              })

            } else {
               // this.dialog = false;
              console.log('error submit!!');
              return false;
            }
          });
        },
        search(){
            let obj ={
                signStatus:this.type,
                current:1,
                size:10
            }
            this.getSignatureList(obj)
        }
     }
  }
  </script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
.input label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.content label {
  /* display:inline-block;
  width:150px;
  text-align: justify;
  text-align-last: justify;
  line-height: 0;
  font-size: 16px; */
  width: 120px !important;
}
.el-form-item__label {
  width: 120px;
}
.content input {
  height:36px;
  /* margin-top: 10px; */
}
.content p {
  margin: 10px 0;
}
.quan {
  margin-top: 15px;
}
.el-form-item__content {
  margin-left: 120px !important;
}
.el-input__icon {
  line-height: 20px !important;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.set {
  width: 200px;
}
</style>
